.variable-dropdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: $cf-radius;
  background-color: $cf-grey-25;
  margin-right: $cf-border;
  margin-top: 6px;

  .select__input-container {
    color: white;
  }
}

.variable-dropdown__dragging {
  border-color: $c-comet;
  box-shadow: 0 0 4px 1px $c-amethyst;
}

.variable-dropdown__dragging + .variable-dropdown {
  pointer-events: none;
}

.variable-dropdown--label {
  user-select: none;
  line-height: $form-sm-height;
  font-size: $form-sm-font;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  background-attachment: fixed;
  display: flex;

  > span {
    display: inline-block;
    padding: 0 $form-sm-padding;
    padding-left: $form-sm-padding - $cf-border;
    color: $c-comet;
    transition: color 0.25s ease;
  }

  .variable-dropdown__dragging & > span {
    color: $c-moonstone;
  }
}

.variable-dropdown--drag {
  display: inline-block;
  width: ceil($form-sm-height * 0.66);
  height: $form-sm-height;
  position: relative;
  opacity: 1;

  .hamburger {
    width: 10px;
    height: $cf-border;
    border-radius: $cf-border * 0.5;
    position: absolute;
    top: 50%;
    right: 0;
    background-color: $c-star;
    transition: background-color 0.25s ease;
    transform: translate(0, -50%);

    &:before,
    &:after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background-color: $c-star;
      transition: background-color 0.25s ease;
      border-radius: $cf-border * 0.5;
      left: 0;
    }
    &:before {
      top: -$cf-space-3xs;
    }
    &:after {
      top: $cf-space-3xs;
    }
  }

  // Hover State
  &:hover .hamburger,
  &:hover .hamburger:before,
  &:hover .hamburger:after {
    background-color: $c-moonstone;
  }

  // Dragging State
  .variable-dropdown__dragging & .hamburger,
  .variable-dropdown__dragging & .hamburger:before,
  .variable-dropdown__dragging & .hamburger:after {
    background-color: $c-moonstone;
  }
}

.variable-dropdown--item {
  font-family: $cf-code-font;
}
